<template>
  <div id="container">
    <div class="ivu-card p-3">
      <div class="search_title d-flex align-items-center">通行信息</div>
      <div class="serach_case"></div>
    </div>
    <div class="ivu-card flex-grow-1 p-4 m-3">
      <div
        class="tools d-flex align-items-center"
        style="
          width: 70%;
          display: flex;
          padding: 0px 2.5rem;
          margin-bottom: 2.5rem;
        "
      >
        <Input
          icon="ios-search"
          style="margin-right: 20px"
          placeholder="请输入姓名查询"
          v-model="searchItem.searchKey"
          @on-search="getData((page = 1))"
          search
          enter-button="搜索"
        />
      </div>

      <div style="padding: 0px 2.5rem">
        <Table :columns="columns" :data="list" :loading="loading">
          <template slot-scope="{ row, index }" slot="pictureurl">
            <img
              :src="row.pictureurl"
              style="width: 100px; border-radius: 2px; padding: 10px 0px"
           
              alt=""
            />
            <!-- @click="show(row.photo)" -->
          </template>
        </Table>
        <div class="text-right mt-4">
          <Page
            :total="total"
            :page-size-opts="[10, 20, 40, 50, 100]"
            show-sizer
            :current="page"
            :page-size="pageSize"
            @on-page-size-change="pageSizeChange"
            @on-change="pageChange"
          ></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import index from "./index.js";
export default index;
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
<style lang="less" scoped>
#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: transparent !important;

  .search_title {
    font-size: 16px;
    font-weight: 600;
    color: #515a6e;
    text-align: left;
    background-color: #fff;
    margin-bottom: 1rem;
    // .largeIcon {
    //   color: #9a70f3;
    //   background-color: #d4c2f9;
    // }
  }

  .serach_case {
    .ivu-form-item {
      margin-bottom: 10px;
    }
  }

  .tools {
    margin-bottom: 25px;

    .ivu-btn {
      margin: 0 10px 0 0;
    }
  }
}
</style>
